import React, {memo, useEffect, useState} from 'react';
//导入我们的样式
import {LunboBox} from "./style";

export default memo(function Lunbo(props) {
  const {topBanners} = props;

  const [myLeft,setMyLeft] = useState(0);
  const [bgLeft,setBgLeft]=useState(0);
  useEffect(()=>{
     let aa=setInterval(()=>{
       if (myLeft < -(topBanners.length-2)*730){
         setMyLeft(0);
         setBgLeft(0);
       }else{
         const aa=myLeft-730;
         const bb=bgLeft-100;
         setMyLeft(aa);
         setBgLeft(bb);
       }
     },5000);
     return ()=>{
       clearInterval(aa);
     }
   },[topBanners,myLeft,bgLeft]);//这里我们要将所依赖的数据和要改变的外部数据都要写进这里
  //如果只写一个中括号,没有元素,那么该 useEffect 方法只会执行一次


  //业务逻辑
      function leftClick() {
        if (myLeft>=0){
          setMyLeft( -(topBanners.length-1)*730);
          setBgLeft( -(topBanners.length-1)*100);
        }else{
          const myleft=myLeft+730;
          const bgleft=bgLeft+100;
          setMyLeft(myleft);
          setBgLeft(bgleft);
        }

      }
      function rightClick(){
        if (myLeft < -(topBanners.length-2)*730){
          setMyLeft(0);
          setBgLeft(0);
        }else{
          const myleft=myLeft-730;
          const bgleft=bgLeft-100;
          setMyLeft(myleft);
          setBgLeft(bgleft);
        }
      }
  return (
        <LunboBox>
          <div className="lunbo_bg">
            <ul className="lunbo_bg_ul"
                style={{width:topBanners.length*100+"%",left:bgLeft+'%'}}>
              {
                topBanners.map((item)=>{
                  return (
                      <li key={item.bannerId}>
                        <img src={item.pic} alt=""/>
                      </li>
                  )
                })
              }
            </ul>
          </div>
          <div className="lunbo">
            <div className="lunbo_left">
              <ul className="mypic"
                style={{width:topBanners.length*730+"px",left:myLeft+'px'}}>
                {
                  topBanners.map((item)=>{
                    return (
                        <li key={item.bannerId}>
                          <img src={item.pic} alt=""/>
                        </li>
                    )
                  })
                }
              </ul>
            </div>
            <div className="lunbo_right"></div>

            <div className="btn_left" onClick={()=>{leftClick()}}>
              
            </div>
            <div className="btn_right" onClick={()=>{rightClick()}}>
              
            </div>
          </div>
        </LunboBox>
    );


}
)
